<template>
    <el-card shadow="always">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click='changeInfo'>新增</el-button>
      <el-divider></el-divider>
      <RoleTable :roleList='roleList' @updateRole="updateRoleList"></RoleTable>  
     
      <RoleModule :modelinfo='modelinfo' @updateRoleList="updateRoleList"></RoleModule>
    </el-card>
</template>

<script>
import RoleTable from './RoleTable'
import RoleModule from './RoleModule'
import {mapActions,mapState} from 'vuex'

export default {
  data(){
    return {
      modelinfo:{status: false}
    }
  },
  computed:{
    ...mapState({'roleList':state=>state.role.roleList})
  },
  components: {
    RoleTable,
    RoleModule
  },
  created(){
    this.roleListAciton()
    console.log(this.roleList)
  },
  methods:{
    updateRoleList(){
      this.roleListAciton()
    },
    changeInfo(){
      this.modelinfo.status = true
    },
    ...mapActions('role',['roleListAciton'])
  }
}
</script>

<style>

</style>